<!DOCTYPE html>

<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>我要借书</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.el-menu {
				border: none;
				border-right-width: 0;
			}

			.el-button {
				border: none;
			}

			.buttonColor {
				background-color: rgb(32, 155, 159);
			}

			.buttonColor:hover {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor:focus {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor2:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li.active {
				color: rgba(32, 155, 159, 0.773)
			}
		</style>
	</head>

	<body style="background-color: #545c64;">
		<div id="app">
			<el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
				<div style="font-size: 20px; color:rgb(32, 155, 159)">
					<div style="float: left;">
						<span>图书管理平台</span></div>
					<div style="float: right; font-size: 15px;">
						<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
					<div style="width: 100px; float: right; font-size: 15px;">
						<a href="personal.html" style="color: rgb(32, 155, 159);">{{ name }}</a>
					</div>
				</div>
			</el-header>
			<el-container style="height: auto;">
				<el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
					<el-menu default-active="3" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
						<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-chat-line-square"></i>借书必读</el-menu-item>
						<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-postcard"></i>个人信息</el-menu-item>
						<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-search"></i>我要借书</el-menu-item>
						<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-document-copy"></i>我要还书</el-menu-item>
					</el-menu>
				</el-aside>

				<!-- <el-container> -->
				<el-main>
					<div class="content-header">
						<h1>我要借书</h1>
					</div>
					<div class="app-container">
						<div class="box">
							<div class="filter-container">
								<el-button type="primary" @click="getAll()" class="buttonColor butT" style="margin-left: 20px;">查询所有</el-button>
								<el-input placeholder="图书编号" v-model="id" style="width: 100px; margin-left: 80px;" class="filter-item"></el-input>
								<el-button type="primary" @click="getBookById()" class="buttonColor butT">按编号查询</el-button>
								<el-input placeholder="图书关键字" v-model="field" style="width: 200px; margin-left: 80px;" class="filter-item"></el-input>
								<el-button type="primary" @click="getBooks()" class="buttonColor butT">按关键字查询</el-button>
							</div>
							<el-table size="small" border current-row-key="id" :data="currentPageData" stripe highlight-current-row>
								<el-table-column type="index" align="center" label="序号"></el-table-column>
								<el-table-column prop="id" width="70px" label="图书编号" align="center"></el-table-column>
								<el-table-column prop="type" width="130px" label="图书类别" align="center"></el-table-column>
								<el-table-column prop="name" label="图书名称" align="center"></el-table-column>
								<el-table-column prop="description" label="图书描述" align="center"></el-table-column>
								<el-table-column prop="price" width="70px" label="图书单价" align="center"></el-table-column>
								<el-table-column prop="number" width="70px" label="图书数量" align="center"></el-table-column>
								<el-table-column prop="lentNumber" width="70px" label="已借数量" align="center"></el-table-column>
								<el-table-column label="操作" width="190px" align="center">
									<template slot-scope="scope">
										<el-button type="primary" size="mini" class="buttonColor" @click="lendBook(scope.row)">借书</el-button>
									</template>
								</el-table-column>
							</el-table>
							<!-- 分页工具条 -->
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
							</el-pagination>
						</div>
					</div>
				</el-main>
				<!-- </el-container> -->
			</el-container>
		</div>

	</body>

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				pagination: {},
				name: '',
				id: '', //输入编号
				field: '', //输入关键字
				dataList: [], //当前页要展示的列表数据
				formData: {}, //表单数据
				dialogFormVisible: false, //控制表单是否可见
				dialogFormVisible4Edit: false, //编辑表单是否可见
				totalPage: 1, // 统共页数，默认为1
				currentPage: 1, //当前页数 ，默认为1
				pageSize: 10, // 每页显示数量
				pageSizes: [10, 20, 40], // 页码划分
				currentPageData: [], //当前页显示内容
				headPage: 1,
				total: 40,
			},

			//钩子函数，VUE对象初始化完成后自动执行
			created() {
				this.name = localStorage.getItem("name");
				if (localStorage.getItem("username") == null){
					window.location.href = "../index.html";
				}
				this.getAll();
			},

			methods: {
				// 退出登录
				logout() {
					localStorage.removeItem("username");
					localStorage.removeItem("password");
					localStorage.removeItem("name");
					window.location.href = "../index.html";
				},
				// 网页跳转
				load1() {
					window.location.href = "required.html";
				},
				load2() {
					window.location.href = "personal.html";
				},
				load3() {
					window.location.href = "search.html";
				},
				load4() {
					window.location.href = "record.html";
				},

				// 分页工具
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					this.pageSize = val;
					this.getCurrentPageData();
				},
				handleCurrentChange(val) {
					console.log(`当前页第 ${val} 页`);
					console.log(`总共 ${this.totalPage} 页`);
					console.log(`总共 ${this.total} 条数据`)
					this.currentPage = val;
					this.getCurrentPageData();
				},
				getCurrentPageData() {
					let begin = (this.currentPage - 1) * this.pageSize;
					let end = this.currentPage * this.pageSize;
					this.currentPageData = this.dataList.slice(
							begin,
							end
					);
				},

				lendBook(row) {
					if(row.lentNumber == row.number){
						this.$message({
							message: '图书库存不足，请重新选择！',
							type: 'warning'
						});
					} else{
						axios.post("/book", row).then((res)=>{
							if(res.data.code == 20011){
								this.dialogFormVisible = false;
								this.$message.success("借阅成功");
								row.lentNumber += 1;
							}else if(res.data.code == 20010){
								this.$message.error("添加失败");
							}else if(res.data.code == 20070){
								this.$message.error("借书失败！您的借书数量已达上限！");
							}else {
								this.$message.error(res.data.msg);
							}
						}).finally(()=>{
						});
					}
				},

				//查询单本图书
				getBookById() {
					// axios.get("/books/"+this.bookName).then((res)=>{
					axios.get("/book/id/" + this.id).then((res) => {
						if (res.data.code == 20041) {
							this.dataList = [];
							this.dataList.push(res.data.data);
						} else {
							this.$message.error(res.data.msg);
						}
						this.getCurrentPageData();
					})
				},

				getBooks() {
					axios.get("/book/field/" + this.field).then((res) => {
						if (res.data.code == 20041) {
							this.dataList = res.data.data;
							this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
							this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
							this.total = this.dataList.length;
							this.getCurrentPageData();
						} else {
							this.$message.error(res.data.msg);
						}
					})
				},

				// getBookByName() {
				// 	axios.get("/book/name/" + this.name).then((res) => {
				// 		if (res.data.code == 20041) {
				// 			this.dataList = res.data.data;
				// 			this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
				// 			this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
				// 			this.total = this.dataList.length;
				// 			this.getCurrentPageData();
				// 		} else {
				// 			this.$message.error(res.data.msg);
				// 		}
				// 	})
				// },
				//
				// getBookByType() {
				// 	axios.get("/book/type/" + this.type).then((res) => {
				// 		if (res.data.code == 20041) {
				// 			this.dataList = res.data.data;
				// 			this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
				// 			this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
				// 			this.total = this.dataList.length;
				// 			this.getCurrentPageData();
				// 		} else {
				// 			this.$message.error(res.data.msg);
				// 		}
				// 	})
				// },
				// getBookByDescription() {
				// 	axios.get("/book/description/" + this.description).then((res) => {
				// 		if (res.data.code == 20041) {
				// 			this.dataList = res.data.data;
				// 			this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
				// 			this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
				// 			this.total = this.dataList.length;
				// 			this.getCurrentPageData();
				// 		} else {
				// 			this.$message.error(res.data.msg);
				// 		}
				// 	})
				// },

				//列表
				getAll() {
					//发送ajax请求
					axios.get("/books").then((res) => {
						this.dataList = res.data.data;
						this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
						this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
						this.total = this.dataList.length;
						this.getCurrentPageData();
					});
				},

				//弹出添加窗口
				handleCreate() {
					this.dialogFormVisible = true;
					this.resetForm();
				},

				//重置表单
				resetForm() {
					this.formData = {};
				},

				//弹出编辑窗口
				handleUpdate(row) {
					// console.log(row);   //row.id 查询条件
					//查询数据，根据id查询
					axios.get("/books/" + row.id).then((res) => {
						// console.log(res.data.data);
						if (res.data.code == 20041) {
							//展示弹层，加载数据
							this.formData = res.data.data;
							this.dialogFormVisible4Edit = true;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				//编辑
				handleEdit() {
					//发送ajax请求
					axios.put("/books", this.formData).then((res) => {
						//如果操作成功，关闭弹层，显示数据
						if (res.data.code == 20031) {
							this.dialogFormVisible4Edit = false;
							this.$message.success("修改成功");
						} else if (res.data.code == 20030) {
							this.$message.error("修改失败");
						} else {
							this.$message.error(res.data.msg);
						}
					}).finally(() => {
						this.getAll();
					});
				},

				// 删除
				handleDelete(row) {
					//1.弹出提示框
					this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
						type: 'info'
					}).then(() => {
						//2.做删除业务
						axios.delete("/books/" + row.id).then((res) => {
							if (res.data.code == 20021) {
								this.$message.success("删除成功");
							} else {
								this.$message.error("删除失败");
							}
						}).finally(() => {
							this.getAll();
						});
					}).catch(() => {
						//3.取消删除
						this.$message.info("取消删除操作");
					});
				}
			}
		})
	</script>

</html>